
<template>
    <BasicModal v-bind="$attrs" @register="registerModal" :title="title" width="600px"
                :minHeight="100" :showOkBtn="false">
        <template #insertFooter>
        </template>
        <!-- 表单 -->
        <a-row class="dynamic-form ">
            <a-form :colon="false" size="default" layout= "horizontal" 
            labelAlign= "right" 
 :labelCol="{ style: { width: '100px' } }"             :model="dataForm"  ref="formRef">
            <a-row :gutter="15">
                <!-- 具体表单 -->
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="starttime" >
            <template #label>审批时间</template>
            <p>{{dataForm.starttime}}</p>
        </a-form-item>
    </a-col>
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="reporting_unit" >
            <template #label>上报单位</template>
            <p>{{dataForm.reporting_unit}}</p>
        </a-form-item>
    </a-col>
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="projects_nums" >
            <template #label>项目数量</template>
            <p>{{dataForm.projects_nums}}</p>
        </a-form-item>
    </a-col>
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="engineering" >
            <template #label>工程</template>
            <p>{{dataForm.engineering}}</p>
        </a-form-item>
    </a-col>
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="goods" >
            <template #label>货物</template>
            <p>{{dataForm.goods}}</p>
        </a-form-item>
    </a-col>
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="service" >
            <template #label>服务</template>
            <p>{{dataForm.service}}</p>
        </a-form-item>
    </a-col>
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="rentOut" >
            <template #label>租赁</template>
            <p>{{dataForm.rentOut}}</p>
        </a-form-item>
    </a-col>
        <a-col :span="24" class="ant-col-item"  >
        <a-form-item    
  name="other" >
            <template #label>其他</template>
            <p>{{dataForm.other}}</p>
        </a-form-item>
    </a-col>
                <!-- 表单结束 -->
            </a-row>
            </a-form>
        </a-row>
    </BasicModal>
    <!-- 有关联表单详情：开始 -->
    <RelationDetail ref="relationDetailRef" />
    <!-- 有关联表单详情：结束 -->
</template>
<script lang="ts" setup>
    import { getDetailInfo } from './helper/api';
    import { getConfigData } from '/@/api/onlineDev/visualDev';
    import { reactive, toRefs, nextTick, ref, computed, unref } from 'vue';
    import { BasicModal, useModal } from '/@/components/Modal';
    // 有关联表单详情
    import RelationDetail from '/@/views/common/dynamicModel/list/detail/index.vue';
    // 表单权限
    import { usePermission } from '/@/hooks/web/usePermission';
    import { useMessage } from '/@/hooks/web/useMessage';

    interface State {
        dataForm: any;
        title: string;
    }

    defineOptions({ name: 'Detail' });
    const { createMessage, createConfirm } = useMessage();
    const [registerModal, { openModal, setModalProps }] = useModal();
        
    const relationDetailRef = ref<any>(null);
    const state = reactive<State>({
        dataForm:{},
        title: '详情',
    });
    const { title, dataForm } = toRefs(state);
    // 表单权限
    const { hasFormP } = usePermission();


    defineExpose({ init });

    function init(data) {
        state.dataForm.id = data.id;
            openModal();
        nextTick(() => {
            setTimeout(initData, 0);
        });
    }
    function initData() {
        changeLoading(true);
        if (state.dataForm.id) {
            getData(state.dataForm.id);
        } else {
            closeModal();
        }
    }
    function getData(id) {
        getDetailInfo(id).then((res) => {
            state.dataForm = res.data || {};
            nextTick(() => {
                changeLoading(false);
            });
        });
    }

    function toDetail(modelId, id) {
        if (!id) return;
        getConfigData(modelId).then((res) => {
            if (!res.data || !res.data.formData) return;
            const formConf = JSON.parse(res.data.formData);
            formConf.popupType = 'general';
            const data = { id, formConf, modelId };
            relationDetailRef.value?.init(data);
        });
    }
    function setFormProps(data) {
        setModalProps(data);
    }
    function changeLoading(loading) {
        setFormProps({ loading });
    }
    
</script>
